<template>
  <el-header class="top-bar">

    <div class="project-name">
      {{ projectStore.getProjectName }}
    </div>

    <div class="search-container">
      <el-input
        v-model="searchQuery"
        placeholder="请输入..."
        clearable
        @keyup.enter="handleSearch"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <el-dropdown trigger="click" @command="handleDropdownCommand">
      <span class="user-menu">
        <el-icon><User /></el-icon>
        <span>个人</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="personal-center">个人中心</el-dropdown-item>
          <el-dropdown-item
            v-for="role in roleStore.roles"
            :key="`${role.value}-login`"
            :command="`${role.value}-login`"
          >
            {{ role.label }}登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

  </el-header>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/api/user';
import { useProjectStore } from '@/stores/project/project';
import { useRoleStore } from '@/stores/project/role';
import { usePathConfigStore } from '@/stores/project/path-config';
import { User } from '@element-plus/icons-vue';

// 定义 props
const props = defineProps<{
  initialQuery?: string;
}>();

const router = useRouter();
const userStore = useUserStore();
const projectStore = useProjectStore();
const roleStore = useRoleStore();
const pathConfigStore = usePathConfigStore();

// 搜索框
const searchQuery = ref('');

// 初始化搜索框内容
watch(
  () => props.initialQuery,
  (newQuery) => {
    searchQuery.value = newQuery || '';
  },
  { immediate: true }
);

// 搜索按钮
const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    ElMessage.warning('请输入搜索关键词');
    return;
  }
  router.push(`/front/search?q=${encodeURIComponent(searchQuery.value.trim())}`);
};

// 下拉菜单命令
const handleDropdownCommand = (command: string) => {
  if (command === 'personal-center') {
    router.push(pathConfigStore.getPersonalCenterPath);
  } else {
    const roleValue = command.replace('-login', '');
    const role = roleStore.roles.find((r) => r.value === roleValue);
    if (role) {
      userStore.logout();
      ElMessage.success('已登出');
      router.push(`/login?role=${roleValue}`);
    } else {
      ElMessage.warning('该角色登录不可用');
    }
  }
};
</script>

<style scoped>
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.project-name {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
  flex-shrink: 0;
}

.search-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px;
}

.search-container .el-input {
  flex-grow: 1;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #409eff;
  flex-shrink: 0;
}
</style>